<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>坐标轴</title>
    <style>
        canvas {
            background: #ccc;
        }
    </style>
</head>
<body>
<canvas width="500" height="400" id="canvas">
    您的浏览器不支持canvas，请更新！
</canvas>
</body>
<script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext("2d");
    ctx.fillStyle="red";
    //坐标轴
        ctx.beginPath();
        ctx.strokeStyle="red";
        ctx.moveTo(5,10);
        ctx.lineTo(10,5);
        ctx.lineTo(15,10);
        ctx.moveTo(10,5);
        ctx.lineTo(10,390);
        ctx.stroke();
        ctx.beginPath();
        ctx.strokeStyle="green";
        ctx.moveTo(10,390)
        ctx.lineTo(490,390);
        ctx.lineTo(485,385);
        ctx.moveTo(490,390);
        ctx.lineTo(485,395);
        ctx.stroke();
    //贝塞尔曲线
        /*ctx.beginPath()
        ctx.moveTo(250,200)
        ctx.quadraticCurveTo(15,305,0,0);
        ctx.stroke();*/

        ctx.beginPath()
        ctx.strokeStyle="red";
        ctx.moveTo(15,15)
      ctx.lineTo(100,15);
        ctx.moveTo(120,35);
        ctx.lineTo(120,100);
        ctx.moveTo(100,15);
        ctx.quadraticCurveTo(130,5,120,35);


        ctx.stroke();

</script>
</html>